<template>
	<view class="pageBox">
		<view class="main">
			<view class="total">
				<view class="totalText flex-center">
					<view class="totalTextItem">
						总积分
					</view>
					<view class="totalTextItem">
						{{ info.credit_11_ke }}
					</view>
				</view>
			
				<view class="use flex-between">
					<view class="useItem flex-center" v-for="item in tabsList" :key="item.id" @click="onTab(item)">
						<view class="useItemText">
							{{ item.title }}
						</view>
						<view class="useItemText">
							{{ item.num }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="listBox">
				<view class="listTitle flex-row">
					<view class="title flex-row">
						数量
					</view>
					<view class="title flex-row">
						备注
					</view>
					<view class="title flex-row">
						时间
					</view>
				</view>
				
				<view class="list">
					<view class="listItem flex" v-for="item in list" :key="item.id">
						<view class="item">
							{{ item.num }}
						</view>
						<view class="item">
							{{ item.remark }}
						</view>
						<view class="item">
							{{ item.createdAt }}
						</view>
					</view>
				</view>
				<uni-load-more :status="listStatus"></uni-load-more>
			</view>
		</view>
		<my-popup-tips :showTips="showTips" :mask="true" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<view class="tipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>
				
				<view class="amount flex-between">
					<view class="amountL">
						转入数量
					</view>
					<input class="amountR" type="text" placeholder="请输入转入数量" v-model="amount">
				</view>
				
				<view class="transfe flex-row">
					<view class="transfeL">
						可转入易付钱包&nbsp;
					</view>
					<view class="transfeR">
						{{ info.credit_11_ke }}
					</view>
				</view>
				
				<view class="gain flex-center">
					可获得易付豆 {{ gain }}
				</view>
				
				<button :plain="true" class="tipsBtn" @click.stop="onTipsBtn">确定</button>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips
		},
		data() {
			return {
				tabsId: -1,
				tabsList: [{
						id: -1,
						title: "冻结",
						status: true,
						num: 0,
					},
					{
						id: 1,
						title: "可用",
						status: false,
						num: 0,
					},
				],
				showTips: false,
				params: {},
				info: {},
				
				amount: "",
				gain: 0,
				
				list: [],
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
			}
		},
		onShow() {
			this.getInfo();
			this.getParams();
			this.list = [];
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			}
		},
		watch: {
			amount(val) {
				this.gain = parseInt( val * Number(this.params.rate) );
			},
			showTips(val) {
				if(!val) {
					this.amount = "";
				}
			},
		},
		methods: {
			onTab(param) {
				this.tabsList.forEach((item) => {
					item.status = false;
					if (item.id == param.id) {
						item.status = true;
						this.tabsId = item.id;
						this.list = [];
						this.form.page = 1;
						this.form.lastId = 0;
						this.loading = false;
						this.finished = false;
						this.getList();
					}
				})
			},
			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onTipsBtn() {
				if(!this.amount) {
					uni.showToast({
						icon: "none",
						title: "请输入转入数量",
						duration: 1500
					})
					return;
				}
				this.$post({
					module: "Finance",
					interface: "7001",
					data: {
						fromCredit: "credit_11",
						amount: this.amount,
					},
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "操作成功",
						duration: 1500
					})
					this.showTips = false;
					this.getInfo();
					this.list = [];
					this.form.page = 1;
					this.form.lastId = 0;
					this.loading = false;
					this.finished = false;
					this.getList();
				}).catch(() => {
					this.showTips = false;
				})
				
			},
			getInfo() {
				this.$post({
					module: "User",
					interface: "1000",
				}).then(res => {
					this.info = res;
				})
			},
			getParams() {
				this.$post({
					module: "Finance",
					interface: "7000",
				}).then(res => {
					this.params = res.params["credit_11-credit_3"];
				})
			},
			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					module: 'Finance',
					interface: 2100,
					data: {
						creditType: "credit_11",
						direction: this.tabsId,
						...this.form
						},
				}).then(res => {
					this.list = this.list.concat(res.list);
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					this.tabsList[0].num=res.unMoney;
					this.tabsList[1].num=res.usMoney;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #ffffff;

		.main {
			.total {
				width: 100%;
				height: 354rpx;
				background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding-top: 76rpx;
				position: relative;
			
				.totalText {
					flex-direction: column;
					margin: 0 auto;
			
					.totalTextItem {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: normal;
						color: #FFFFFF;
					}
			
					.totalTextItem:nth-last-of-type(1) {
						margin-top: 16rpx;
					}
				}
			
				.use {
					width: 100%;
					height: 120rpx;
					background: linear-gradient(180deg, #FF7270 0%, #F2615F 32%, #F2615F 69%, #FF7270 100%);
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
			
					.useItem {
						width: 50%;
						flex-direction: column;
			
						.useItemText {
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: normal;
							color: #FFFFFF;
						}
			
						.useItemText:nth-last-of-type(1) {
							margin-top: 12rpx;
						}
					}
				}
			
			
			}

			

			

			.listBox {
				width: 100%;
				margin-top: 38rpx;
				padding-bottom: 200rpx;
				.listTitle {
					padding: 0 30rpx;
					.title {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					.title:nth-of-type(1) {
						width: 26%;
					}
					.title:nth-of-type(2) {
						width: 38%;
					}
					.title:nth-of-type(3) {
						width: 36%;
					}
				}
				.list {
					padding: 20rpx 30rpx 0;
					.listItem {
						align-items: flex-start;
						.item {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: normal;
							color: #666666;
							margin-top: 16rpx;
							word-break: break-all;
						}
						.item:nth-of-type(1) {
							width: 26%;
						}
						.item:nth-of-type(2) {
							width: 38%;
						}
						.item:nth-of-type(3) {
							width: 36%;
						}
					}
				}
			}
		}
		.tipsBox {
			width: 550rpx;
			background: #ffffff;
			border-radius: 32rpx;
			padding: 52rpx 40rpx 30rpx 26rpx;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}
			.amount {
				width: 100%;
				margin: 20rpx;
				.amountL {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.amountR {
					width: 60%;
					height: 72rpx;
					background: #f9f9f9;
					border-radius: 52rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					padding: 0 26rpx
				}
			}
			.transfe {
				justify-content: flex-end;
				.transfeL {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
				.transfeR {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F2615F;
					line-height: 40rpx;
				}
			}
			.gain {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 42rpx;
			}
			.tipsBtn {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 40rpx;
				width: 200rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
				padding: 0;
				margin: 10rpx auto 0;
				border: none;
			}
		}
	}
</style>
